<template>
	<view>
		<view class="">
			<!-- 2.0.19支持autoBack，默认为false -->
			<u-navbar leftText="设置中心" :autoBack="true" @leftClick="toback">
			</u-navbar>
		</view>
		<view class="con-body" style="background-color: #f8f8f8;">
			<view class="maincontent">
				<u-cell-group style="margin-top: 10rpx;" :border="false">
					<u-cell :border="false" isLink @click="torepair"
						title="修改资料">
						<u-icon slot="icon" size="14" name="https://resourse.cnlhjt.com/upload/20220827/59ee9f8dc294f3a13f29e376539b82f4.png"></u-icon>
						</u-cell>
					<u-cell :border="false" isLink @click="show=true" icon="lock"
						title="重置密码">
						<u-icon slot="icon" size="14" name="https://resourse.cnlhjt.com/upload/20220827/597feefee3d265dfc2ce7870cbe9d75d.png"></u-icon>
						</u-cell>
				</u-cell-group>
				
			</view>
			<!-- <view style="padding:20rpx;font-size: 24rpx;color:#0B868E;">注：初始密码123456,请尽快修改,保障账户的安全！若已修改，请忽略。</view> -->
			<button class="btn_out" type="default" @click="showmodal=true">退出登录</button>
			<u-modal :show="showmodal" :title="title" :content='content' :showCancelButton="true" :closeOnClickOverlay="true" confirmColor="#008987" @close="showmodal=false" @cancel="showmodal=false" @confirm="loginOut"></u-modal>
			<u-popup :show="show" mode="bottom" bgColor="transparent">
				<view class="warp_con">
					<view class="rect u-padding-20">
						<view class="pass_title">修改密码</view>
						
						<view class="pas_con">
							<text class="va_m">原密码</text>
							<input class="va_m" v-model="oldpas" type="text" placeholder="请输入原密码">
						</view>
						<view class="pas_con">
							<text class="va_m">新密码</text>
							<input class="va_m" v-model="newpas" type="text" placeholder="请输入新密码">
						</view>
						<view class="pas_con">
							<text class="va_m">确认密码</text>
							<input class="va_m" v-model="surepas" type="text" placeholder="请确认新密码">
						</view>
						<view class="btn_con">
							<button class="sure_set" shape="square" @click="submit">重置</button>
							<!-- <button class="new_set" shape="square">重置</button> -->
							<button class="" shape="square" @click="show=false">取消</button>
						</view>
					</view>
				</view>
			</u-popup>
			<!-- 弹框提示 -->
			<u-toast ref="uToast" />
		</view>
	</view>
</template>

<script>
	import cookie from "@/util/store/cookie.js";
	import { changePass } from "@/service/userService.js";
	export default {
		data () {
			return {
				show:false,
				oldpas:'',
				newpas:'',
				surepas:'',
				
				showmodal:false,
				title:'温馨提示',
				content:'您确定要退出该账号的登录状态吗？'
			}
		},
		methods:{
			toback(){
				let pages = getCurrentPages();
				let beforePage = pages[pages.length - 2];
				beforePage.$vm.reFresh = Math.random()
			},
			submit:function(){
				if (this.newpas == '' || this.surepas == ''){
					this.$refs.uToast.show({
						message: '密码不能为空！',
						type: 'error', 
						icon: false
					})
				}else if(this.newpas != this.surepas){
					this.$refs.uToast.show({
						message: '两次输入密码不一致！',
						type: 'warning', 
						icon: false
					})
				}else{
					changePass({
						password: this.oldpas,
						new_password: this.newpas
					}).then(res=>{
						if(res.code==200){
							this.show=false,
							this.$refs.uToast.show({
								message: res.msg,
								type: 'success', 
								icon: false
							})
						}else{
							this.$refs.uToast.show({
								message: res.msg,
								type: 'warning', 
								icon: false
							})
						}
					})
				}
				
			},
			loginOut:function(){
				cookie.clearAll();
				uni.$u.vuex('isLogin', false);
				this.$refs.uToast.show({
					message: '已退出登录状态',
					type: 'success', 
					icon: false
				})
				setTimeout(function(){
					uni.$u.route({
						url: '/pages/index/index',
						type: 'redirectTo'
					});
				},1000)
				
			},
			torepair:function(){
				uni.navigateTo({
					url:'./setIntro'
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f8f8f8;
	}
	.maincontent{
		margin-top: 20rpx; 
		background-color: #fefefe;
		border-radius: 20rpx;
		width: 100%; 
		// margin-left: 2%;
		// box-shadow: 5rpx 5rpx 20rpx rgba(0,0,0,0.15);
	}
	.warp_con {
		// padding:20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
	}
	
	.rect {
		width: 100%;
		padding:40rpx 0;
		// box-shadow: 0 0 20rpx #aaa;
		font-size: 28rpx;
		border-radius: 10rpx;
		background-color: #fff;
	}
	.rect input{
		display: inline-block;
		width:65%;
		height:50rpx;
		font-size: 28rpx;
		text-align: left;
		padding:0 10rpx;
		border-radius: 10rpx;
		border:1rpx solid #ddd;
	}
	.pass_title{
		text-align: center;
		font-size: 35rpx;
		margin-bottom:20rpx;
	}
	.pas_con{
		padding:20rpx 0;
		text-align: center;
	}
	.pas_con text{
		display: inline-block;
		width:25%;
	}
	.btn_con{
		text-align: right;
		margin-top:40rpx;
	}
	.btn_con button{
		display: inline-block;
		width:25%;
		height:60rpx;
		line-height: 60rpx;
		font-size: 28rpx;
		margin-right:20rpx;
	}
	.sure_set,.sure_set button{
		color:#fff !important;
		background-color: #0B868E !important;
	}
	.new_set,.new_set button{
		color:#fff !important;
		background-color: #0ca5ad !important;
	}
	.btn_out{
		position: fixed;
		bottom:100rpx;
		width:94%;
		left:3%;
		height:70rpx;
		line-height: 70rpx;
		font-size: 30rpx;
		border-radius: 40rpx;
		background-color: #ccc !important;
		color:#fff !important;
		border:none;
	}
</style>
